<template>
  <div class="foodList_wrapper">
    <div class="shop_ad">
      <img class="pic" src="https://cube.elemecdn.com/e/16/ed35f184a9e2b09b9eb34200398e9png.png?x-oss-process=image/format,webp/resize,w_686">
    </div>
    <div class="food_list" :style="foodListHeight">
      <div class="menu_container">
        <div class="menu_left" id="menuList" ref="menuList">
          <ul>
            <li class="menu_item" v-for="(item, index) of menuList" :key="index" :class="{active: index == menuIndex}" @click="chooseMenu(index)">
              <span>{{item.name}}</span>
              <span class="cart_list_length" v-if="categoryNum[index] && item.type==1">{{categoryNum[index]}}</span>
            </li>
          </ul>
        </div>
        <div class="menu_right" ref="foodList">
          <div class="con">
            <dl v-for="(item, index) of menuList" :key="index">
              <dt>
                <header class="menu_detail_header">
                  <div class="menu_detail_header_left">
                    <strong class="menu_item_title">{{item.name}}</strong>
                    <span class="menu_item_description">{{item.description}}</span>
                  </div>
                </header>
              </dt>
              <dd>
                <div class="food_item" v-for="(innerItem, index) of item.foods" :key="index" @click="openFoodDetail(innerItem)">
                  <div class="food_img"><img :src="imgBaseUrl + innerItem.image_path" /></div>
                  <div class="food_info">
                    <h3><span>{{innerItem.name}}</span></h3>
                    <p class="food_desc">{{innerItem.description}}</p>
                    <p class="food_sales">
                      <span>月售{{innerItem.month_sales}}份</span>
                      <span>好评率{{innerItem.satisfy_rate}}%</span>
                    </p>
                    <p class="food_activity" v-if="innerItem.activity">
                      <span :sales="innerItem.activity.image_text">{{innerItem.activity.image_text}}</span>
                      <span sales="每单限10份优惠">每单限10份优惠</span>
                    </p>
                    <p class="food_price">
                      <span>{{innerItem.specfoods[0].price}}</span>
                      <i v-if="innerItem.specifications.length">起</i>
                      <!-- <del>¥42.9</del> -->
                    </p>
                    <div class="food_button_wrapper">
                      <buy-cart
                        :shopId='shopId'
                        :foods='innerItem'
                        :specsLength="innerItem.specifications.length"
                        @open="openSpecsPopus"
                        @showReduceTip="showReduceTip"
                        @showMoveDot="showMoveDotFun"
                      >
                      </buy-cart>
                    </div>
                  </div>
                </div>
              </dd>
            </dl>
          </div>
        </div>
        <transition name="toggle-cart">
          <div class="food_panel" v-show="showFoodDetail">
            <div class="close" @click="closeFoodDetail"><span class="iconfont">&#xe615;</span></div>
            <div class="con">
              <div class="food_img"><img :src="imgBaseUrl + foodDetail.image_path" /></div>
              <div class="food_info">
                <h3><span>{{foodDetail.name}}</span></h3>
                <p class="food_sales">
                  <span>月售{{foodDetail.month_sales}}份</span>
                  <span>好评率{{foodDetail.satisfy_rate}}%</span>
                </p>
                <div class="food_operation">
                  <p class="food_price">
                    <span>19.9</span>
                    <!-- <del>¥42.9</del> -->
                  </p>
                  <p class="food_activity" v-if="foodDetail.activity">
                    <span :sales="foodDetail.activity.image_text">{{foodDetail.activity.image_text}}</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <div class="food_button_wrapper">
                    <buy-cart :shopId='shopId' :foods='foodDetail'></buy-cart>
                  </div>
                </div>
                <p class="food_desc">{{foodDetail.description}}</p>
                <p class="explain">价格说时<span class="iconfont">&#xe66b;</span></p>
              </div>
            </div>
          </div>
        </transition>
        <transition name="toggle-cart">
          <div class="food_specs" v-if="showFoodSpecs">
            <div class="con">
              <span class="iconfont close" @click="closeSpecsPopus">&#xe615;</span>
              <div class="food_item">
                <div class="food_img"><img :src="imgBaseUrl + foodSpecs.image_path" /></div>
                <div class="food_info">
                  <h3><span>{{foodSpecs.name}}</span></h3>
                  <p class="selected">已选：{{foodSpecs.specifications[0].values[specsIndex]}}</p>
                  <p class="food_price">
                    <small>¥</small>
                    <span>{{foodSpecs.specfoods[specsIndex].price}}</span>
                    <!-- <del>¥42.9</del> -->
                  </p>
                </div>
              </div>
              <div class="specs">
                <p class="title">{{foodSpecs.specifications[0].name}}</p>
                <div class="tags">
                  <span v-for="(item, index) in foodSpecs.specifications[0].values" :key="index" :class="{active: index == specsIndex}" @click="chooseSpecs(index)">{{item}}</span>
                </div>
              </div>
              <button class="specs_button" @click="addSpecs(foodSpecs.category_id, foodSpecs.item_id, foodSpecs.specfoods[specsIndex].food_id, foodSpecs.specfoods[specsIndex].name, foodSpecs.specfoods[specsIndex].price, foodSpecs.specifications[0].values[specsIndex], foodSpecs.specfoods[specsIndex].packing_fee, foodSpecs.specfoods[specsIndex].sku_id, foodSpecs.specfoods[specsIndex].stock)">选好了</button>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="buy_cart_container" @click="toggleCartList">
      <div class="cart_icon_num" :class="{empty: totalNum <= 0, move_in_cart: receiveInCart}" ref="cartContainer">
        <span class="cart_list_length" v-if="totalNum">
          {{totalNum}}
        </span>
      </div>
      <div class="cart_num">
        <p v-if="totalPrice > 0" class="price">¥ {{totalPrice}}</p>
        <p v-else>未选购商品</p>
        <p>另需配送费¥{{deliveryFee}}元</p>
      </div>
      <div class="gotopay" :class="{btn_disabled: minimumOrderAmount > 0}">
        <span v-if="minimumOrderAmount > 0">¥{{minimumOrderAmount}}起送</span>
        <router-link tag="span" v-else :to="{path:'/checkout', query:{geohash, shopId}}">
          去结算
        </router-link>
      </div>
    </div>
    <transition name="toggle-cart">
      <div class="cart_food_list" v-show="showCartList && cartFoodList.length">
        <div class="tag">已减4.2元</div>
        <header>
          <h4>购物车</h4>
          <div class="clear_cart" @click="clearCart">
            <span class="iconfont">&#xe60e;</span>
            <span>清空</span>
          </div>
        </header>
        <div class="cart_food_details" id="cartFood">
          <ul>
            <li class="cart_food_li" v-for="(item, index) of cartFoodList" :key="index">
              <div class="cart_list_num">
                <em class="ellipsis">{{item.name}}</em>
                <p class="ellipsis">{{item.specs}}</p>
              </div>
              <div class="cart_list_price">
                <!-- <del>¥28</del> -->
                <span>¥</span>
                <span>{{item.price}}</span>
              </div>
              <div class="cart_list_control">
                <a class="minus"
                  @click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)"
                >
                  <span class="iconfont">&#xe60c;</span>
                </a>
                <span class="count">{{item.num}}</span>
                <a class="add"
                  @click="addToCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)"
                >
                  <span class="iconfont">&#xe686;</span>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <transition
      appear
      @after-appear="afterEnter"
      @before-appear="beforeEnter"
      v-for="(item, index) in showMoveDot"
      :key="index"
    >
      <span class="move_dot" v-if="item">
        <span class="iconfont">&#xe686;</span>
      </span>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="showFoodSpecs" @click="closeSpecsPopus"></div>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="showCartList && cartFoodList.length" @click="toggleCartList"></div>
    </transition>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapState, mapMutations } from 'vuex'
import BScroll from 'better-scroll'
import BuyCart from './BuyCart'
export default {
  name: 'FoodList',
  components: {
    BuyCart
  },
  data () {
    return {
      menuIndex: 0, // 已选菜单索引值，默认为0
      menuIndexChange: true, // 解决选中index时，scroll监听事件重复判断设置index的bug
      shopListTop: [], // 商品列表的高度集合
      categoryNum: [], // 商品类型右上角已加入购物车的数量
      totalPrice: 0, // 总共价格
      cartFoodList: [], // 购物车商品列表
      showCartList: false, // 是否显示购物车列表
      showFoodDetail: false, // 是否显示食品详情
      foodDetail: [], // 食品详情的数据
      showFoodSpecs: false, // 是否显示食品规格
      foodSpecs: [], // 食品规格的数据
      specsIndex: 0, // 当前选中的规格索引值
      receiveInCart: false, // 购物车组件下落的圆点是否到达目标位置
      showMoveDot: [], // 控制下落的小圆点显示隐藏
      windowHeight: null, // 屏幕的高度
      elLeft: 0, // 当前点击加按钮在网页中的绝对top值
      elBottom: 0, // 当前点击加按钮在网页中的绝对left值
      heightObj: { height: 0 }
    }
  },
  props: ['geohash', 'shopId', 'shopDetailData', 'menuList', 'imgBaseUrl', 'shopTabHeight'],
  created () {
    this.INIT_BUYCART()
  },
  mounted () {
    this.windowHeight = window.innerHeight
  },
  computed: {
    ...mapState(['cartList']),
    // 配送费
    deliveryFee () {
      if (this.shopDetailData) {
        return this.shopDetailData.float_delivery_fee
      } else {
        return null
      }
    },
    // 还差多少元起送，为负数时显示去结算按钮
    minimumOrderAmount () {
      if (this.shopDetailData) {
        return this.shopDetailData.float_minimum_order_amount - this.totalPrice
      } else {
        return null
      }
    },
    // 当前商店购物信息
    shopCart () {
      return {...this.cartList[this.shopId]}
    },
    // 购物车中总共商品的数量
    totalNum () {
      let num = 0
      this.cartFoodList.forEach(item => {
        num += item.num
      })
      return num
    },
    foodListHeight () {
      let foodListHeight = this.heightObj
      foodListHeight.height = (window.innerHeight - this.shopTabHeight) + 'px'
      return foodListHeight
    }
  },
  methods: {
    ...mapMutations(['ADD_CART', 'MINUS_CART', 'INIT_BUYCART', 'CLEAR_CART']),
    // 控制购物列表是否显示
    toggleCartList () {
      if (this.cartFoodList.length) {
        this.showCartList = !this.showCartList
      }
    },
    openFoodDetail (item) {
      this.showFoodDetail = true
      this.showLoading = true
      this.foodDetail = item
    },
    closeFoodDetail () {
      this.showFoodDetail = false
      this.showLoading = false
    },
    openSpecsPopus (foods) {
      if (foods) {
        this.foodSpecs = foods
      }
      this.showFoodSpecs = !this.showFoodSpecs
      this.specsIndex = 0
    },
    closeSpecsPopus () {
      this.showFoodSpecs = false
    },
    // 获取食品列表的高度，存入shopListTop
    getFoodListHeight () {
      const listContainer = this.$refs.foodList
      if (listContainer) {
        const listArr = Array.from(listContainer.children[0].children)
        listArr.forEach((item, index) => {
          this.shopListTop[index] = item.offsetTop
        })
        this.listenScroll(listContainer)
      }
    },
    // 当滚动食品列表时，监听其scrollTop值来设置对应的食品菜单项的当前样式
    listenScroll (element) {
      this.foodScroll = new BScroll(element, {
        probeType: 3,
        deceleration: 0.0015,
        bounce: false,
        swipeTime: 2500,
        click: true,
        scrollbar: {
          fade: true,
          interactive: false // 1.8.0 新增
        },
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        }
      })
      this.menuScroll = new BScroll(this.$refs.menuList, {
        probeType: 3,
        deceleration: 0.0015,
        bounce: false,
        swipeTime: 2500,
        click: true,
        scrollbar: {
          fade: true,
          interactive: false // 1.8.0 新增
        },
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        }
      })
      // 获取左边菜单列表的可视高度
      const menuListHeight = this.$refs.menuList.clientHeight
      // 滑动食品列表，滚动到对应的菜单项
      this.foodScroll.on('scroll', (pos) => {
        if (!this.$refs.menuList) {
          return
        }
        this.shopListTop.forEach((item, index) => {
          if (this.menuIndexChange && Math.abs(Math.round(pos.y)) >= item) {
            this.menuIndex = index
            const currentMenu = this.$refs.menuList.querySelectorAll('.active')
            const el = currentMenu[0]
            this.menuScroll.scrollToElement(el, 800, 0, -(menuListHeight / 2 - 100))
          }
        })
      })
    },
    // 点击左侧食品菜单项，滚动到对应的食品列表栏目
    chooseMenu (index) {
      this.menuIndex = index
      // menuIndexChange解决运动时listenScroll依然监听的bug
      this.menuIndexChange = false
      this.foodScroll.scrollTo(0, -this.shopListTop[index], 400)
      // 获取左边菜单列表的可视高度
      const menuListHeight = this.$refs.menuList.clientHeight
      const currentMenu = this.$refs.menuList.querySelectorAll('.active')
      const el = currentMenu[0]
      this.menuScroll.scrollToElement(el, 800, 0, -(menuListHeight / 2 - 100))
      this.foodScroll.on('scrollEnd', () => {
        this.menuIndexChange = true
      })
    },
    // 加入购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
    addToCart (categoryId, itemId, foodId, name, price, specs) {
      this.ADD_CART({shopId: this.shopId, categoryId, itemId, foodId, name, price, specs})
    },
    // 移出购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
    removeOutCart (categoryId, itemId, foodId, name, price, specs) {
      this.MINUS_CART({shopId: this.shopId, categoryId, itemId, foodId, name, price, specs})
    },
    /**
     * 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，
     * 整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
    */
    initCategoryNum () {
      let newArr = []
      let cartFoodNum = 0
      this.totalPrice = 0
      this.cartFoodList = []
      this.menuList.forEach((item, index) => {
        if (this.shopCart && this.shopCart[item.foods[0].category_id]) {
          let num = 0
          Object.keys(this.shopCart[item.foods[0].category_id]).forEach(itemid => {
            Object.keys(this.shopCart[item.foods[0].category_id][itemid]).forEach(foodid => {
              let foodItem = this.shopCart[item.foods[0].category_id][itemid][foodid]
              num += foodItem.num
              if (item.type === 1) {
                this.totalPrice += foodItem.num * foodItem.price
                if (foodItem.num > 0) {
                  this.cartFoodList[cartFoodNum] = {}
                  this.cartFoodList[cartFoodNum].category_id = item.foods[0].category_id
                  this.cartFoodList[cartFoodNum].item_id = itemid
                  this.cartFoodList[cartFoodNum].food_id = foodid
                  this.cartFoodList[cartFoodNum].num = foodItem.num
                  this.cartFoodList[cartFoodNum].price = foodItem.price * foodItem.num
                  this.cartFoodList[cartFoodNum].name = foodItem.name
                  this.cartFoodList[cartFoodNum].specs = foodItem.specs
                  cartFoodNum++
                }
              }
            })
          })
          newArr[index] = num
        } else {
          newArr[index] = 0
        }
      })
      this.totalPrice = this.totalPrice.toFixed(2)
      this.categoryNum = [...newArr]
    },
    // 清除购物车
    clearCart () {
      this.toggleCartList()
      this.CLEAR_CART(this.shopId)
    },
    // 隐藏动画
    hideLoading () {
      this.showLoading = false
    },
    // 记录当前所选规格的索引值
    chooseSpecs (index) {
      this.specsIndex = index
    },
    // 多规格商品加入购物车
    addSpecs (categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock) {
      this.ADD_CART({shopId: this.shopId, categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock})
      this.openSpecsPopus()
    },
    // 显示提示，多规格商品直接无法减去
    showReduceTip () {
      Toast({
        message: '多规格以及带属性商品只能\n去购物车删除哦',
        duration: 1000,
        onClose: () => {}
      })
    },
    // 监听圆点是否进入购物车
    listenInCart () {
      if (!this.receiveInCart) {
        this.receiveInCart = true
        this.$refs.cartContainer.addEventListener('animationend', () => {
          this.receiveInCart = false
        })
        this.$refs.cartContainer.addEventListener('webkitAnimationEnd', () => {
          this.receiveInCart = false
        })
      }
    },
    // 显示下落圆球
    showMoveDotFun (showMoveDot, elLeft, elBottom) {
      this.showMoveDot = [...this.showMoveDot, ...showMoveDot]
      this.elLeft = elLeft
      this.elBottom = elBottom
    },
    beforeEnter (el) {
      // console.log(document.defaultView.getComputedStyle(el))
      el.style.transform = `translate3d(0, ${30 + this.elBottom - this.windowHeight}px, 0)`
      el.children[0].style.transform = `translate3d(${this.elLeft - 30}px, 0, 0)`
      el.children[0].style.opacity = 0
    },
    afterEnter (el) {
      el.style.transform = `translate3d(0, 0, 0)`
      el.children[0].style.transform = `translate3d(0, 0, 0)`
      el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)'
      el.children[0].style.transition = 'transform .55s linear'
      this.showMoveDot = this.showMoveDot.map(item => false)
      el.children[0].style.opacity = 1
      el.children[0].addEventListener('transitionend', () => {
        this.listenInCart()
      })
      el.children[0].addEventListener('webkitAnimationEnd', () => {
        this.listenInCart()
      })
    }
  },
  watch: {
    // 监听当前商店购物信息的变化
    shopCart (value) {
      this.initCategoryNum()
    },
    // 购物车列表发生变化，没有食品时，隐藏
    cartFoodList (value) {
      if (!value.length) {
        this.showCartList = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .shop_ad
    padding: .14rem .32rem 0
    img
      border-radius: .08rem
  .food_list
    .menu_container
      height: 100%
      display: flex
      padding-bottom: .96rem
      background-color: #fff
      box-sizing: border-box
      .menu_left
        width: 1.54rem
        height: 100%
        overflow-y: auto
        padding-bottom: .7rem
        box-sizing: border-box
        background-color: #f8f8f8
        position: relative
        li
          position: relative
          padding: .32rem .15rem
          font-size: .24rem
          color: #666
          &.active
            color: #333
            background-color: #fff
          .cart_list_length
            position: absolute
            right: .08rem
            top: .08rem
            line-height: 1
            background-image: linear-gradient(-90deg,#ff7416,#ff3c15 98%)
            color: #fff
            border-radius: .32rem
            padding: .04rem .1rem
            font-size: .20rem
            transform: scale(0.9)
      .menu_right
        flex: 1
        position: relative
        height: 100%
        overflow-y: auto
        box-sizing: border-box
        padding: 0 .3rem .7rem .2rem
        .menu_detail_header
          padding: .15rem .6rem .15rem 0
          .menu_item_title
            margin-right: .1rem
            font-weight: 700
            font-size: .24rem
            color: #666
        .food_item
          padding: .2rem 0
          display: flex
          justify-content: space-between
          position: relative
          .food_img
            width: 1.9rem
            height: 1.9rem
            margin-right: .2rem
          .food_info
            flex: 1
            width: 3rem
            h3 span
              width: 100%
              display: inline-block
              color: #333
              font-weight: 700
              overflow: hidden
              font-size: .3rem
              line-height: .3rem
              white-space: nowrap
              ellipsis()
            p
              color: #999
              text-align: left
              white-space: nowrap
              ellipsis()
            .food_desc, .food_sales
              margin: .05rem 0
              transform: scale(0.9)
              transform-origin: 0 0
            .food_activity span
              position: relative
              color: transparent
              white-space: nowrap
              &:after
                content: attr(sales)
                border-radius: .1rem
                border: .01rem solid #ffc9c1
                color: #eb6551
                position: absolute
                left: 0
                top: 0
                right: -100%
                transform: scale(.5)
                transform-origin: 0 0
                display: flex
                align-items: center
                justify-content: center
                font-size: .4rem
            .food_price
              margin-top: .1rem
              font-size: .36rem
              color: #ff5339
              line-height: .36rem
              display: flex
              align-items: baseline
              &:before
                content: "\A5"
                font-size: .3rem
                display: inline-block
              i, del
                font-size: .24rem
                color: #999
                margin-left: .12rem
            .food_button_wrapper
              position: absolute
              right: 0
              bottom: .15rem
      .food_panel
        position: fixed
        top: 0
        left: 0
        height: 100%
        width: 100%
        z-index: 9998
        .close
          width: .56rem
          height: .56rem
          border-radius: 50%
          background-color: rgba(0,0,0,.2)
          display: flex
          align-items: center
          justify-content: center
          position: absolute
          z-index: 1
          top: .2rem
          right: .3rem
          .iconfont
            color: #fff
            font-size: .4rem
        .con
          position: relative
          background-color: #fff
          flex-direction: column
          width: 100%
          height: 100%
          overflow-y: auto
          padding-bottom: 2rem
          .food_img
            width: 100%
            height: 7.5rem
            display: block
            img
              width: 100%
              height: 100%
          .food_info
            padding: .3rem .3rem 0
            h3 span
              color: #333
              font-weight: 700
              overflow: hidden
              font-size: .4rem
              line-height: .4rem
              white-space: nowrap
              ellipsis()
            p
              color: #666
              text-align: left
            .food_desc, .food_sales
              margin: .15rem 0
            .food_operation
              display: flex
              align-items: baseline
              position: relative
              .food_activity span
                position: relative
                color: transparent
                white-space: nowrap
                &:after
                  content: attr(sales)
                  border-radius: .1rem
                  border: .01rem solid #ffc9c1
                  color: #eb6551
                  position: absolute
                  left: 0
                  top: 0
                  right: -100%
                  transform: scale(.5)
                  transform-origin: 0 0
                  display: flex
                  align-items: center
                  justify-content: center
                  font-size: .4rem
              .food_price
                margin: .1rem .2rem 0 0
                font-size: .36rem
                color: #ff5339
                line-height: .36rem
                display: flex
                align-items: baseline
                &:before
                  content: "\A5"
                  font-size: .3rem
                  display: inline-block
                del
                  font-size: .24rem
                  color: #999
                  margin-left: .12rem
              .food_button_wrapper
                position: absolute
                right: 0
                bottom: 0
                display: flex
                align-items: center
                a
                  width: .44rem
                  height: .44rem
                  display: block
                  color: #fff
                  text-align: center
                  line-height: .44rem
                  border-radius: 100%
                  background: #2396ff
                  box-sizing: border-box
                  .iconfont
                    font-size: .24rem
                a.minus
                  color: #2396ff
                  background: #fff
                  border: .01rem #2396ff solid
                span
                  width: .5rem
                  font-size: .28rem
                  text-align: center
            .explain
              margin-top: .1rem
              .iconfont
                margin-left: .03rem
                font-size: .26rem
      .food_specs
        position: fixed
        bottom: 0
        left: 0
        width: 100%
        height: 11rem
        background: #fff
        z-index: 10000
        .con
          position: relative
          display: flex
          flex-direction: column
          padding: .32rem
          height: 100%
          box-sizing: border-box
          .close
            position: absolute
            top: .25rem
            right: .25rem
            z-index: 13
            width: .5rem
            height: .5rem
            font-size: .5rem
          .food_item
            padding: .2rem 0
            display: flex
            justify-content: space-between
            position: relative
            .food_img
              width: 1.9rem
              height: 1.9rem
              margin-right: .2rem
            .food_info
              flex: 1
              width: 3rem
              display: flex
              flex-direction: column
              h3 span
                width: 100%
                display: inline-block
                color: #333
                font-weight: 700
                overflow: hidden
                font-size: .34rem
                line-height: .40rem
                margin-bottom: .08rem
                white-space: nowrap
                ellipsis()
              p
                color: #666
                text-align: left
                white-space: nowrap
                ellipsis()
                &.selected
                  flex: 1
              .food_price
                font-size: .48rem
                color: #ff5339
                line-height: .36rem
                font-weight: 500
          .specs
            flex: 1
            .title
              color: #666
              font-size: .28rem
              margin-bottom: .24rem
            .tags
              display: flex
              flex-wrap: wrap
              margin: 0 -.16rem
              span
                display: inline-block
                min-width: 1.7rem
                min-height: .65rem
                padding: 0 .2rem
                border-radius: .05rem
                background-color: #f5f5f5
                color: #333
                font-size: .26rem
                text-align: center
                margin: 0 .16rem .24rem
                line-height: .65rem
                &.active
                  color: rgb(35, 149, 255)
                  font-weight: 700
                  background-color: rgba(35, 149, 255, 0.2)
          .specs_button
            width: 100%
            height: .8rem
            color: #fff
            font-size: .32rem
            font-weight: 700
            border-radius: .05rem
            background-color: #2396ff
  .buy_cart_container
    position: fixed
    right: 0
    bottom: 0
    left: 0
    z-index: 9999
    display: flex
    -webkit-align-items: center
    align-items: center
    padding-left: 1.58rem
    background-color: rgba(61,61,63,.9)
    height: .96rem
    .cart_icon_num
      position: absolute
      left: .25rem
      bottom: .15rem
      width: 1rem
      height: 1rem
      box-sizing: border-box
      border-radius: 100%
      background-color: #3190e8
      border: .1rem solid #444
      box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0,0,0,.1)
      will-change: transform
      &.empty
        background-image: radial-gradient(circle,#363636 6.266667vw,#444 0)
      &:before
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: url('') 50% no-repeat
        background-size: .45rem
        content: ""
      .cart_list_length
        position: absolute
        right: -.12rem
        top: -.12rem
        line-height: 1
        background-image: linear-gradient(-90deg,#ff7416,#ff3c15 98%)
        color: #fff
        border-radius: .32rem
        padding: .04rem .1rem
        font-size: .20rem
        transform: scale(0.9)
    .cart_icon_num.empty:before
      background-image: url('')
    .cart_icon_num.move_in_cart
      animation: mymove .5s ease-in-out
    .cart_num
      flex: 1
      p
        font-size: .24rem
        color: #999
        &.price
          font-size: .36rem
          line-height: normal
          color: #fff
    .gotopay
      height: 100%
      width: 1.8rem
      background-color: #38ca73
      text-align: center
      text-decoration: none
      user-select: none
      line-height: .96rem
      word-break: keep-all
      span
        color: #fff
        font-size: .3rem
        font-weight: 700
      &.btn_disabled
        background-color: #535356
  .cart_food_list
    position: fixed
    bottom: .96rem
    left: 0
    z-index: 9998
    width: 100%
    background-color: #fff
    transition: transform .3s ease
    .tag
      background-color: #fffad6
      border-top: .01rem solid #f9e8a3
      opacity: .96
      line-height: .4rem
      font-size: .24rem
      text-align: center
    header
      display: flex
      align-items: center
      padding: 0 .3rem
      border-bottom: .01rem solid #ddd
      background-color: #eceff1
      color: #666
      height: .8rem
      h4
        flex: 1
        font-size: .32rem
      .clear_cart
        display: flex
        align-items: center
        padding-left: .3rem
        color: #666
        text-decoration: none
        font-size: .26rem
        line-height: .4rem
        .iconfont
          font-size: .24rem
          margin-right: .05rem
    .cart_food_details
      max-height: 6rem
      overflow: auto
      .cart_food_li
        display: flex
        align-items: center
        padding: .15rem .25rem
        min-height: .8rem
        border-bottom: .01rem solid #f5f5f5
        .cart_list_num
          flex: 5.5
          font-size: .32rem
          color: #333
          ellipsis()
          em
            font-style: normal
          p
            color: #999
            zoom: 0.5
        .cart_list_price
          flex: 2.5
          text-align: right
          span
            white-space: nowrap
            font-size: .32rem
            font-weight: 700
            color: #ff5339
        .cart_list_control
          flex: 3
          display: flex
          justify-content: flex-end
          align-items: center
          a
            width: .44rem
            height: .44rem
            display: block
            color: #fff
            text-align: center
            line-height: .44rem
            border-radius: 100%
            background: #2396ff
            box-sizing: border-box
            .iconfont
              font-size: .24rem
          a.minus
            color: #2396ff
            background: #fff
            border: .01rem #2396ff solid
          span
            width: .5rem
            font-size: .28rem
            text-align: center
  @keyframes mymove
    0%
      transform: scale(1)
    25%
      transform: scale(.8)
    50%
      transform: scale(1.1)
    75%
      transform: scale(.9)
    100%
      transform: scale(1)
  .move_dot
    position: fixed
    bottom: .6rem
    left: .5rem
    .iconfont
      width: 0.44rem
      height: 0.44rem
      display: block
      color: #fff
      text-align: center
      line-height: 0.44rem
      border-radius: 100%
      background: #2396ff
      box-sizing: border-box
      font-size: .24rem
  .mask
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index: 9997
    background: rgba(0, 0, 0, .5)
  .showcover-enter-active,
  .showcover-leave-active
    transition: opacity 0.3s
  .showcover-enter,
  .showcover-leave-active
    opacity: 0
  .toggle-cart-enter-active, .toggle-cart-leave-active
    transition: all .3s ease-out
  .toggle-cart-enter, .toggle-cart-leave-active
    transform: translateY(100%)
</style>
